<template>
	<view class="content_btn">
		<u-button v-if="showCancelButton" class="u-m-r-32" hover-class="none" :ripple="false" :hair-line="false" :custom-style="cancelStyle"
			@click="cancel">{{cancelText}}</u-button>
		<u-button :ripple="false" hover-class="none" :hair-line="false" :custom-style="showCancelButton ? confirmStyle : style"
			@click="confirm">{{confirmText}}</u-button>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const props = defineProps({
		cancelText: String,
		confirmText: String,
		showCancelButton: false
	})
	const cancelStyle = ref({
		backgroundColor: '#E6E6E6',
		color: '#867F7F',
		border: 'none',
		width: '200rpx',
	})
	const confirmStyle = ref({
		backgroundColor: '#00D075',
		color: '#fff',
		border: 'none',
		width: '460rpx'
	})
	const style = ref({
		backgroundColor: '#00D075',
		color: '#fff',
		border: 'none',
		width: '90vw'
	})
	const emit = defineEmits(['cancel', 'confirm'])
	const cancel = () => {
		emit('cancel')
	}
	const confirm = () => {
		emit('confirm')
	}
</script>

<style lang="scss" scoped>
	.content_btn {
		position: fixed;
		bottom: 0;
		/* #ifdef MP-WEIXIN */
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
		left: 0;
		right: 0;
		margin: auto;
		padding: 0 38rpx;
		background-color: #fff;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		z-index: 999;
	}
</style>